<template>
  <el-form :model="form" ref="ruleFormRef" :rules="rules" status-icon :label-position="labelPosition" label-width="130px" :inline="true" class="demo-form-inline">
    <el-form-item label="项目名称" >
      <el-input maxlength="50" v-model="form.name" :disabled="1" />
    </el-form-item>
    <el-form-item label="合作方式" >
      <SelectOption :selectValue="form.cooperationMode" :options="data.cooperateList" @change-value="changeValue" :disabled="1" > </SelectOption>
    </el-form-item>
    <el-form-item label="承建单位">


      <popup-tree-input :data="orgAllList" :props="data.popupTreeProps" :prop="deptForm.parentName == null
                                                ? $t('message.org.top_menu')
                                                : form.buildUnit
                                                " :node-key="'' + deptForm.parentId"
                                                :current-change-handle="changeValue1"  :disabled="1" />
      <!-- <SelectOption :selectValue="form.buildUnit" :options="data.orgAllList" @change-value="changeValue1"> </SelectOption> -->
    </el-form-item>
    <el-form-item label="项目负责人" prop="chargePerson">
      <!-- <SelectOption :selectValue="form.chargePerson" :options="data.userAllList" @change-value="changeValue2"> </SelectOption> -->
      <user-list-modal
      v-model="form.chargePerson"
      @update:modelValue="changeValue2"
      :default-users="[]"
      :multiple="false"
      :devType="'platform'" :disabled="1"
      />
    </el-form-item>
    <el-form-item label="项目级别" >
      <SelectOption :selectValue="form.projectLevel" :options="data.levelOptions" @change-value="changeValue3" :disabled="1" > </SelectOption>
    </el-form-item>
    <el-form-item label="项目类别" >
      <SelectOption :selectValue="form.projectClass" :options="data.typeOptions" @change-value="changeValue4" :disabled="1" > </SelectOption>
    </el-form-item>

    <el-form-item label="总经费（万）">
      <el-input type="number" v-model="form.totalBudget" :disabled="1"  />
    </el-form-item>

    <el-form-item label="获批外部经费（万）">
      <el-input  oninput="value=value.replace(/^0|[^0-9]/g,'')" type="number"  placeholder="请输入"  v-model="form.approveExternalFund" :disabled="1"  />
    </el-form-item>

    <el-form-item label="合作单位">
      <el-input maxlength="50" v-model="form.partnerContactUnit" :disabled="1"  />
    </el-form-item>

    <el-form-item label="合作方联系人">
      <el-input maxlength="30" v-model="form.partnerContactPerson" :disabled="1"  />
    </el-form-item>

    <el-form-item label="合作方联系电话">
      <el-input maxlength="20" v-model="form.partnerContactTel"  :disabled="1" />
      <!-- <el-date-picker v-model="form.rdDate" type="date" placeholder="选择日期" clearable /> -->
    </el-form-item>

    <el-form-item label="项目状态">
      <SelectOption :selectValue="form.projectState" :options="data.stateSelect" @change-value="changeValue5" :disabled="1" > </SelectOption>
    </el-form-item>

    <el-form-item label="获批立项时间" prop="approvalDate">
      <el-date-picker v-model="form.approvalDate" format="YYYY-MM-DD" type="date" placeholder="选择日期" clearable @change="handleChangeDate" :disabled="1"  />
    </el-form-item>

    <el-form-item style="width: 100%" label="项目简介" prop="shortIntroduction">
      <el-input v-model="form.shortIntroduction" :autosize="{ minRows: 2 }" maxlength="300" type="textarea" placeholder="请输入" :disabled="1"  />
    </el-form-item>

    <el-form-item style="width: 100%" label="预期成果" prop="expectedAchieve">
      <el-input v-model="form.expectedAchieve" :autosize="{ minRows: 2 }" maxlength="300" type="textarea" placeholder="请输入" :disabled="1"  />
    </el-form-item>

    <el-form-item label="备注：" style="width: 100%">
      <el-input v-model="form.remark" :autosize="{ minRows: 2 }" maxlength="200" type="textarea" placeholder="请输入"  :disabled="1" />
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import UserListModal from '@/views/project/components/UserListModal/index.vue';
import PopupTreeInput from '@/views/science/components/PopupTreeInput/index.vue';
import SelectOption from '@/views/science/components/selectOption/index.vue';
import { computed, reactive, ref, watch } from 'vue';
import { useStore } from 'vuex';

export default {
  components: {
    SelectOption,UserListModal,PopupTreeInput
  },
  props:{
    orgAllList: {
      type: Array,
      required: true,
    },
  },
  emits: {
    valueFlag: null,
  },
  setup(props, { emit }) {
    const store = useStore()
    const labelPosition = ref('right')

    const data = reactive({
      popupTreeProps: {
                label: 'name',
                children: 'children',
            },
      activeName: ref('first'),
      addUnit: false,
      innerValue: '',
      outsideValue: '',

      cooperateList: computed(() => store.state.technologyStrength.gjhInteractSelect),
      // orgAllList: computed(() => store.state.technologyStrength.orgAllList),
      levelOptions: computed(() => store.state.technologyStrength.gjhProjectLevel),
      typeOptions: [],
      stateSelect: computed(() => store.state.technologyStrength.gjhStatueSelect),
      userAllList: computed(() => store.state.technologyStrength.userAllList),
    })

    const form = reactive(store.state.technologyStrength.technologyProjectsInfo)

    if(form.projectLevelId){
      data.levelOptions.map((item)=>{
        if(item.itemValue == form.projectLevelId){
          data.typeOptions = item.children
        }
      })
    }

    watch(form, (newValue, oldValue) => {
      store.commit('technologyStrength/gettechnologyProjectsInfo', { ...form })
    });

    const changeValue = (item) => {
      form.cooperationMode = item.itemText
      form.cooperationModeId = item.itemValue
    }
    const changeValue1 = (item) => {
      form.buildUnit = item.name
      form.buildUnitId = item.id
    }
    const changeValue2 = (item) => {
      form.chargePerson = item.cname
      form.chargePersonId = item.userId
    }
    const changeValue3 = (item) => {
      form.projectLevel = item.itemText
      form.projectLevelId = item.itemValue
      data.typeOptions = item.children
      form.projectClass = ''
      form.projectClassId = ''
    }
    const changeValue4 = (item) => {
      form.projectClass = item.itemText
      form.projectClassId = item.itemValue
    }
    const changeValue5 = (item) => {
      form.projectState = item.itemText
      form.projectStateId = item.itemValue
    }
    //手机号码校验
    var checkPhone = (rule, value, callback) => {
        if (!value) {
                // return callback(new Error("手机号不能为空"));
        } else {
            const reg = /^1[3-9][0-9]\d{8}$/;
            // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
            if (reg.test(value)) {
                    callback();
            } else {
                    // 具体错误信息没有提示
                    return callback(new Error("请输入正确的手机号"));
            }
        }
    };
    const rules = reactive({
      name: [
        { required: true, message: '请输入项目名称', trigger: 'blur' },
      ],
      cooperationMode: [
        { required: true, message: '请选择合作方式', trigger: 'change', },
      ],
      buildUnit: [
        { required: true, message: '请选择承建单位', trigger: 'change', },
      ],
      chargePerson:[
        { required: true, message: '请选择项目负责人', trigger: 'change', },
      ],
      projectLevel: [
        { required: true, message: '请选择项目级别', trigger: 'change', },
      ],
      projectClass: [
        { required: true, message: '请选择项目类别', trigger: 'change', },
      ],
      totalBudget: [
        { required: true, message: '请输入总经费（万）', trigger: 'blur' },
      ],
      approveExternalFund: [
        { required: true, message: '请输入获批外部经费（万）', trigger: 'blur', },
      ],
      partnerContactUnit: [
        { required: true, message: '请输入合作单位', trigger: 'blur' },
      ],
      projectState: [
        { required: true, message: '请选择项目状态', trigger: 'change' },
      ],
      approvalDate: [
        { required: true, message: '请选择获批立项时间', trigger: 'change' },
      ],
      shortIntroduction: [
        { required: true, message: '请输入项目简介', trigger: 'blur' },
      ],
      expectedAchieve: [
        { required: true, message: '请输入预期成果', trigger: 'blur' },
      ],
      partnerContactTel: [
        { validator: checkPhone, trigger: "blur" },
        { min: 11, message: "手机号不足11位", trigger: "blur" },
      ],
    })

    const deptForm = {
            parentId: 0,
            parentName: '',
        }

    const ruleFormRef = ref()
    const submitForm = async () => {
      await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          emit('valueFlag', true)
          console.log('submit!')
        } else {
          emit('valueFlag', false)
        }
      })
    }

    const handleChangeDate = (val) => {
      const year = val.getFullYear(); // 获取年份
      const month = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1); // 获取月份，需要加1
      const day = val.getDate() < 10 ? '0' + val.getDate() : val.getDate(); // 获取日期
      const formattedDate = `${year}-${month}-${day}`;
      form.approvalDate = formattedDate
      store.commit('technologyStrength/gettechnologyProjectsInfo', { ...form })
    }


    return {
      labelPosition,
      data,
      form,
      rules,
      ruleFormRef,
      submitForm,
      handleChangeDate,
      deptForm,
      changeValue,
      changeValue1,
      changeValue2,
      changeValue3,
      changeValue4,
      changeValue5,
    }
  },
}
</script>
<style lang="scss" scoped>
.demo-form-inline .el-form-item {
  width: 48%;
}

:deep(.labelHeight .el-form-item__label) {
  line-height: 20px;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-date-editor.el-input__inner) {
  width: 100%;
}

:deep(.demo-form-inline .el-select) {
  width: 100%;
  margin: 0;
}

.el-select {
  width: 100%;
  margin: 0;
}

.selectLabel {
  width: 70%;
  min-height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
}

.addLabel {
  display: inline-block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #169bd5;
  border-radius: 6px;
  color: #fff;
  margin-left: 15px;
}

.unitBox {
  width: 100%;
  margin: 30px 0;

  .title {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
  }

  .tagBox {
    line-height: 40px;
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 15px;
  }
}

.el-tag {
  margin-right: 10px;
}
</style>
